<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
			<el-form-item label="类型" prop="type">
				<el-select v-model="form.type" @change="form.msg = ''" filterable style="width: 100%">
					<el-option v-for="(item, key) in types" :key="key" :label="item" :value="key" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="['text'].includes(form.type)" label="内容或者网址，完整网址" prop="msg">
				<el-input v-model="form.msg" placeholder="请输入内容或者网址" type="textarea" clearable></el-input>
			</el-form-item>
			<el-form-item v-else-if="['image'].includes(form.type)" label="图片" prop="image">
				<sc-upload v-model="form.msg" title="上传图片"></sc-upload>
			</el-form-item>
			<el-form-item v-else :label="types[form.type]" prop="file">
				<sc-upload-file v-model="form.msg" :title="'上传'+types[form.type]" :accept="acc[form.type]"></sc-upload-file>
			</el-form-item>
			<el-form-item label="计划发送时间" prop="send_time">
				<el-date-picker style="width: 100%;" v-model="form.send_time" value-format="X" type="datetime"
				placeholder="计划发送时间，留空默认直接发送" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		components: {
		},
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				//表单数据
				form: {
					id: "",
					msg: "",
					type: 'text',
					send_time: '',
				},
				acc: {'text': '文本', 'image': '图片', 'audio': 'audio/mpeg', 'video': 'video/mp4', '*': '其他'},
				types: {'text': '文本', 'image': '图片', 'audio': '音频', 'video': '视频', '*': '其他'},

				//验证规则
				rules: {
					msg: [{
						required: true,
						message: '请输入内容或者网址，完整网址'
					}],
					// remark: [{
					// 	required: true,
					// 	message: '请输入备注'
					// }]
				}
			}
		},
		mounted() {
		},
		methods: {
			//显示
			open(mode = 'add') {
				this.mode = mode;
				this.visible = true;
				return this
			},
			timeChange(value) {
				this.form.start_time = value[0]
				this.form.end_time = value[1]
			},
			//表单提交方法
			async submit() {
				var valid = await this.$refs.dialogForm.validate().catch(() => {})
				if (!valid) {
					return false
				}
				this.isSaveing = true;
				let form = JSON.parse(JSON.stringify(this.form))
				var res;
				if (this.form.id) {
					res = await this.$API.marketing.msgtsk.update.post(form);
				} else {
					res = await this.$API.marketing.msgtsk.create.post(form);
				}

				this.isSaveing = false;
				if (res.code == 200) {
					if (this.mode == 'add') {
						this.form.id = res.data
					}
					let form = JSON.parse(JSON.stringify(this.form))
					this.$emit('success', form, this.mode)
					this.visible = false;
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message || res.msg, "提示", {
						type: 'error'
					})
				}
			},
			//表单注入数据
			setData(data) {
				this.form.id = data.id
				this.form.send_time = data.send_time

				this.form.type = data.type
				this.form.msg = data.msg
				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				//Object.assign(this.form, data)
			}
		}
	}
</script>

<style>
</style>
